<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="../layui/layui.js"></script>
	<link rel="stylesheet" href="../layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/backer/HouseForSale.css"/>
	<script src="../js/jquery-1.12.4.js"></script>
	<script src="../js/uploadPreview.js"></script>
</head>
<body>
<div class="head-div">
	<i class="layui-icon layui-icon-dollar">&nbsp; <span onclick="location.href='http://localhost:8080/backer/syshomepage';" style="cursor: pointer;">返回</span>&nbsp;&nbsp;/&nbsp;&nbsp;信息管理&nbsp;&nbsp;/&nbsp;&nbsp;发布信息</i>
</div>
<div class="maintemplate"><br /><br />
	<form action="" method="post">
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>选择类型
			</div>
			<select name="houseType.id" class="obtain1 selecthouse cursor isblue obtain housetypeid" >
				<option class="housetype" value="">下拉选择类型</option>
			</select>
			<span class="nextspan">请选择多层住宅</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>选择小区
			</div>
			<!--<input class="obtain2 right-input isblue rq obtain" type="text" placeholder="请输入小区名称" />-->
			<select name="village.id" class="obtain1 selecthouse cursor isblue obtain villageid">
				<option class="village" value="">下拉选择小区</option>

			</select>
			<span class="nextspan">请输入小区名称</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>选择区域
			</div>
			<select name="area.id" class="obtain3 selectarea cursor isblue obtain areaid" >
				<option class="areas" value="">下拉选择区域</option>
			</select>
			<span class="nextspan">请选择区域</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>户型
			</div>
			<select name="room" class="obtain4 selecthousetype cursor isblue obtain" >
				<option value="">请选择室</option>
				<option>1</option>
				<option>2</option>
				<option>1</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<select name="hall" class="obtain5 selecthousetype cursor isblue obtain" >
				<option value="">请选择厅</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>0</option>
			</select>
			<select name="defend" class="obtain6 selecthousetype cursor isblue obtain" >
				<option value="">请选择卫</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>0</option>
			</select>
			<span class="nextspan">请选择户型</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>面积
			</div>
			<input type="number" name="houseSize" class="obtain7 input-area isblue area obtain" placeholder="请输入面积 m²(平方)" />
			<span class="nextspan">请输入面积</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>租金
			</div>
			<input type="number" name="price" class="obtain8 input-price isblue price obtain" placeholder="请输入租金" />
			<span class="nextspan">请输入租金</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>选择朝向
			</div>
			<select name="orientation" class="obtain9 selectdirection cursor isblue obtain" >
				<option value="">下拉选择方向</option>
				<option value="北">北</option>
				<option value="南">南</option>
				<option value="西">西</option>
				<option value="东">东</option>
				<option value="南北">南北</option>
			</select>
			<span class="nextspan">请选择朝向</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>装修
			</div>
			<select name="renovation.id" class="obtain10 selectarea cursor isblue obtain renovationid" >
				<option class="renovation" value="">下拉选择装修</option>
			</select>
			<span class="nextspan">请选择装修</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>楼层
			</div>
			<input type="text" name="storeyUser" class="obtain11 selectfloor isblue lc obtain" placeholder="请输入所在楼层">
			<input type="text" name="storeySum" class="obtain11 selectfloor isblue zlc obtain" placeholder="请输入总楼层">
			<span class="nextspan">请输入所在楼层</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				标签
			</div>
			<div class="houselable" v="1">
			</div>
			<div class="nextspan2">只能选择四个</div>
		</div><br />
		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<div class="lable-left">
				<span class="redstar">* </span>信息标题
			</div>
			<input type="text" class="obtain12 selecttitle isblue lc obtain" name="title" placeholder="请输入标题">
			<span class="nextspan">请输入标题</span>
		</div>
		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<div class="lable-left">
				<span class="redstar">* </span>描述
			</div>
			<textarea class="txtarea obtain13 obtain" name="describe"></textarea>
			<span class="nextspan">请输入描述</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>配套设施
			</div>
			<select name="facilitie.id" class="selectarea cursor isblue obtain14 obtain facilitieid" >
				<option class="facilities" value="">无</option>
			</select>
			<span class="nextspan">请选择配套设施</span>
		</div>
		<div class="margin-bottom">
			<div class="lable-left">
				<span class="redstar">* </span>屋内设备
			</div>
			<div class="rmp">
				<input name="roomFacilities" class="roompro obtain15 obtain" value="水" type="checkbox" />&nbsp;&nbsp;<span>水</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="电" type="checkbox" />&nbsp;&nbsp;<span>电</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="天然气" type="checkbox" />&nbsp;&nbsp;<span>天然气</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="煤气" type="checkbox" />&nbsp;&nbsp;<span>煤气</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="暖气" type="checkbox" />&nbsp;&nbsp;<span>暖气</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="互联网" type="checkbox" />&nbsp;&nbsp;<span>互联网</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="有线电视" type="checkbox" />&nbsp;&nbsp;<span>有线电视</span>
				<input name="roomFacilities" class="roompro obtain15 obtain" value="电话" type="checkbox" />&nbsp;&nbsp;<span>电话</span>
			</div>
			<span class="nextspan">至少选择一项</span>
		</div><br />
		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<div class="lable-left">
				<span class="redstar">* </span>联系人
			</div>
			<input readonly="readonly" th:value="${session.user.linkman}" name="linkman" type="text" class="selecttitle isblue obtain16 obtain" value="张三"/>
			<span class="nextspan">请输入联系人</span>
		</div>
		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<div class="lable-left">
				<span class="redstar">* </span>上传图片
			</div>
			<div class="layui-upload inline-block" ><br />
				<button type="button" class="layui-btn" id="btn_multiple_upload_img" >上传图片</button>
				<div class="layui-upload layui-input-block">
					<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
						<div class="layui-upload-list" id="upload_image_list"></div>
						<input type="hidden" name="images_str" class="upload_image_url" value="">
					</blockquote>
				</div>
			</div>
			<span class="nextspan">请上传室内图片</span>
		</div>
		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<div class="lable-left">
				<span class="redstar">* </span>选择有效时间
			</div>
			<div class="choosedate">
				<div class="choosedate-div">
					<input type="radio" checked="checked" name="etime" value="7" />&nbsp;7天
				</div>
				<div class="choosedate-div">
					<input type="radio" name="etime" value="30" />&nbsp;30天
				</div>
				<div class="choosedate-div">
					<input type="radio" name="etime" value="60" />&nbsp;60天
				</div>
			</div>
			<span class="nextspan obtain obtain20">请选择有效时间</span>
		</div>

		<span name="name"></span>

		<div class="margin-bottom" style="clear: both;margin-top: 20px;"><br />
			<input id="upgrade" class="upgrade" type="button" style="margin-left: 174px;" value="提交发布" />
		</div>
		<input hidden name="user.uid" th:value="${session.user.uid}">
	</form>
</div>
</body>
<script>
	var imgcount = 0;
	layui.use(['upload'], function () {
		var upload = layui.upload;
		upload.render({
			elem: '#btn_multiple_upload_img'
			,url: '../upimg/upload' //改成您自己的上传接口
			,multiple: true
			,auto:false
			,bindAction:"#upgrade"
			,accept:"images"
			,choose: function(obj){
				//将每次选择的文件追加到文件队列
				var files = obj.pushFile();

				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#upload_image_list').append('<img style="width: 100px;height: 66px;margin-left: 7px" src="'+ result +'" title="单击删除" onclick="delMultipleImgs(this)" class="layui-upload-img">');
					imgcount++;
				});
			}
			,before: function(obj){

			}
			,done: function(res){
				if(--imgcount==0){
					$.ajax({
						url:"http://localhost:8080/house/save2",
						data:$("form").serialize(),
						type:"post",
						dataType:"json",
						success:function (data){
							if(data){
								alert("新增成功!");
								location.href="http://localhost:8080/backer/syshomepage";
							}else{
								alert("新增失败!");
							}
						}
					})
				}
			}
		});
	});
	/**
	 * 多图上传的单击删除操作
	 * @param this_img
	 */
	function delMultipleImgs(this_img) {
		//获取下标
		var subscript = $("#upload_image_list img").index(this_img);
		multiple_images = $('.upload_image_url').val().split(",");
		//删除图片
		this_img.remove();
		//删除数组
		multiple_images.splice(subscript, 1);
		imgcount--;
		$('.upload_image_url').val(multiple_images);
	};

</script>
<script>
	$(".upgrade2").click(function(){

		if ($("[name=linkman]").val()==""){
			$("[name=linkman]").siblings("span").css("visibility","visible");
		}else{
			$("[name=linkman]").siblings("span").css("visibility","hidden");
		}

		if ($(".facilitieid").val()==""){
			$(".facilitieid").siblings("span").css("visibility","visible");
		}else{
			$(".facilitieid").siblings("span").css("visibility","hidden");
		}

		if ($("[name=describe]").val()==""){
			$("[name=describe]").siblings("span").css("visibility","visible");
		}else{
			$("[name=describe]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=title]").val()==""){
			$("[name=title]").siblings("span").css("visibility","visible");
		}else{
			$("[name=title]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=storeyUser]").val()==""){
			$("[name=storeyUser]").siblings("span").css("visibility","visible");
		}else{
			$("[name=storeyUser]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=storeySum]").val()==""){
			$("[name=storeySum]").siblings("span").siblings("span").css("visibility","visible");
		}else{
			$("[name=storeySum]").siblings("span").css("visibility","hidden");
		}

		if ($(".renovation").siblings("span").val()==""){
			$(".renovation").siblings("span").css("visibility","visible");
		}else{
			$(".renovation").siblings("span").css("visibility","hidden");
		}

		if ($("[name=price]").val()==""){
			$("[name=price]").siblings("span").css("visibility","visible");
		}else{
			$("[name=price]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=houseSize]").val()==""){
			$("[name=houseSize]").siblings("span").css("visibility","visible");
		}else{
			$("[name=houseSize]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=defend]").val()==""){
			$("[name=defend]").siblings("span").css("visibility","visible");
		}else{
			$("[name=defend]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=hall]").val()==""){
			$("[name=hall]").siblings("span").css("visibility","visible");
		}else{
			$("[name=hall]").siblings("span").css("visibility","hidden");
		}

		if ($("[name=room]").val()==""){
			$("[name=room]").siblings("span").css("visibility","visible");
		}else{
			$("[name=room]").siblings("span").css("visibility","hidden");
		}

		if ($(".areaid").val()==""){
			$(".areaid").siblings("span").css("visibility","visible");
		}else{
			$(".areaid").siblings("span").css("visibility","hidden");
		}

		if ($(".villageid").val()==""){
			$(".villageid").siblings("span").css("visibility","visible");
		}else{
			$(".villageid").siblings("span").css("visibility","hidden");
		}

		if ($(".housetypeid").val()==""){
			$(".housetypeid").siblings("span").css("visibility","visible");
		}else{
			$(".housetypeid").siblings("span").css("visibility","hidden");
		}

		if($("[name=names]").val()!="" && $("[name=linkman]").val()!="" && $(".facilitieid").val()!=""
				&& $("[name=describe]").val()!="" && $("[name=title]").val()!="" && $("[name=storeyUser]").val()!=""
				&& $("[name=storeySum]").val()!="" && $(".renovation").siblings("span").val()!="" && $("[name=price]").val()!=""
				&& $("[name=houseSize]").val()!="" && $("[name=defend]").val()!="" && $("[name=hall]").val()!=""
				&& $("[name=room]").val()!="" && $(".areaid").val()!="" && $(".villageid").val()!="" && $(".housetypeid").val()!=""){
			$.ajax({
				url:"http://localhost:8080/house/save2",
				data:$("form").serialize(),
				type:"post",
				dataType:"json",
				success:function (data){
					if(data){
						alert("新增成功!");
						location.href="http://localhost:8080/backer/syshomepage";
					}else{
						alert("新增失败!");
					}
				}
			})
		}else{
			alert("文本框不能为空!");
		}



	});
	$(function () {
		$("#up").uploadPreview({Img: "imgPre", Width: 120, Height: 120 });
		$.ajax({
			url:"http://localhost:8080/house/listhousetype",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".housetype").after("<option value='"+d.id+"'>"+d.name+"</option>")
				});
			}
		});

		$.ajax({
			url:"http://localhost:8080/house/listvillage",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".village").after("<option value='"+d.id+"'>"+d.name+"</option>")
				});
			}
		});

		$.ajax({
			url:"http://localhost:8080/house/listarea",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".areas").after("<option value='"+d.id+"'>"+d.name+"</option>")
				});
			}
		});
		$.ajax({
			url:"http://localhost:8080/house/listrenovation",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".renovation").after("<option value='"+d.id+"'>"+d.name+"</option>")
				});
			}
		});
		$.ajax({
			url:"http://localhost:8080/house/listfacilities",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".facilities").after("<option value='"+d.id+"'>"+d.name+"</option>")
				});
			}
		});
		$.ajax({
			url:"http://localhost:8080/house/listlabel2",
			type:"post",
			dataType:"json",
			success:function(data){
				$.each(data,function(i,d) {
					$(".houselable").append("<div onclick='houseclick(this)' names="+d.id+" class=bq"+i+" n=bq"+i+" a="+0+">"+d.name+"</div>");
				});
			}
		});

	})

	/*

        $("form").submit(function(){
            var arr = $("[name=name]").val();
            console.log("userId---"+$("[name=userId]").val());
            console.log("name---"+arr);
            console.log("video---"+$("[name=video]").val());
            console.log("outdoorImg---"+$("[name=outdoorImg]").val());
            console.log("houseTypeImg---"+$("[name=houseTypeImg]").val());
            console.log("indoorImg---"+$("[name=indoorImg]").val());
            console.log("linkman---"+$("[name=linkman]").val());
            console.log("roomFacilities---"+$("[name=roomFacilities]").val());
            console.log("facilitiesId---"+$("[name=facilitiesId]").val());
            console.log("describe---"+$("[name=describe]").val());
            console.log("storeyUser---"+$("[name=storeyUser]").val());
            console.log("storeySum---"+$("[name=storeySum]").val());
            console.log("renovationId---"+$("[name=renovationId]").val());
            console.log("orientation---"+$("[name=orientation]").val());
            console.log("price---"+$("[name=price]").val());
            console.log("houseSize---"+$("[name=houseSize]").val());
            console.log("defend---"+$("[name=defend]").val());
            console.log("hall---"+$("[name=hall]").val());
            console.log("room---"+$("[name=room]").val());
            console.log("areaid---"+$("[name=areaid]").val());
            console.log("villageId---"+$("[name=villageId]").val());
            console.log("housetypeId---"+$("[name=housetypeId]").val());
        });
    */

	$(".choosedate-div").click(function(){
		$(this).children().checked=true;
		$(this).toggleClass("color","#409eff");
	});
	$(".houselable div").click(function(){

	});

	function houseclick(t){
		if($(t).attr("a")=="0" && $(".houselable").attr("v")!="5"){
			$(".houselable").next("div").css("visibility","hidden");
			$(".houselable").attr("v",($(".houselable").attr("v")*1)+1);
			$(t).addClass("isselect");
			$(t).css("color","#fff");
			$(t).attr("a","1");
			$("[name=name]").append("<input hidden name='names' style='display: ;' n="+$(t).attr("n")+" class='"+$(t).attr("n")+"'"+" value="+$(t).attr("names")+">");
		}else if($(t).attr("a")=="1"){
			$(".houselable").next("div").css("visibility","hidden");
			$(".houselable").attr("v",($(".houselable").attr("v")*1)-1);
			$(t).removeClass("isselect");
			$(t).css("color","#999999");
			$(t).attr("a","0");
			$("[name=name] ."+$(t).attr("n")).remove();
		}else{
			$(".houselable").next("div").css("visibility","visible");
		}
	}

	$(".isblue").click(function(){
		$(".isblue").removeClass("blueline");
		$(this).addClass("blueline");
	});
	$(".isblue").blur(function(){
		$(".isblue").removeClass("blueline");
	});
	$(".rq").blur(function(){
		if ($(this).val()=="") {
			$(".rq").next("span").css("visibility","visible");
		} else{
			$(".rq").next("span").css("visibility","hidden");
		}
	});
	$(".area").blur(function(){
		if ($(this).val()=="") {
			$(".area").next("span").css("visibility","visible");
		} else{
			$(".area").next("span").css("visibility","hidden");
		}
	});
	$(".price").blur(function(){
		if ($(this).val()=="") {
			$(".price").next("span").css("visibility","visible");
		} else{
			$(".price").next("span").css("visibility","hidden");
		}
	});
	$(".zlc,.lc").blur(function(){
		if ($(".zlc").val()=="" || $(".lc").val()=="") {
			$(this).next("span").css("visibility","visible");
			$(this).next().next("span").css("visibility","visible");
		} else{
			$(this).next("span").css("visibility","hidden");
			$(this).next().next("span").css("visibility","hidden");
		}
	});

	layui.use('upload', function(){
		var $ = layui.jquery
				,upload = layui.upload;

		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test01'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo1').attr('src', result); //图片链接（base64）
					$("[name=indoorImg]").val(result);
				});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		});

		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test02'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo2').attr('src', result);
					$("[name=houseTypeImg]").val(result);
				});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#demoText2');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		});

		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test03'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo3').attr('src', result);
					$("[name=outdoorImg]").val(result);
				});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#demoText3');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		});


		//多图片上传
		upload.render({
			elem: '#test2'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,multiple: true
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
				});
			}
			,done: function(res){
				//上传完毕
			}
		});

		//指定允许上传的文件类型
		upload.render({
			elem: '#test3'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,accept: 'file' //普通文件
			,done: function(res){
				layer.msg('上传成功');
				console.log(res);
			}
		});
		upload.render({ //允许上传的文件后缀
			elem: '#test4'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,accept: 'file' //普通文件
			,exts: 'zip|rar|7z' //只允许上传压缩文件
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});
		upload.render({
			elem: '#test5'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,accept: 'video' //视频
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
				$("[name=video]").val(res.files.file);
			}
		});
		upload.render({
			elem: '#test6'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,accept: 'audio' //音频
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});

		//设定文件大小限制
		upload.render({
			elem: '#test7'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,size: 60 //限制文件大小，单位 KB
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});

		//同时绑定多个元素，并将属性设定在元素上
		upload.render({
			elem: '.demoMore'
			,before: function(){
				layer.tips('接口地址：'+ this.url, this.item, {tips: 1});
			}
			,done: function(res, index, upload){
				var item = this.item;
				console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
			}
		})

		//选完文件后不自动上传
		upload.render({
			elem: '#test8'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,auto: false
			//,multiple: true
			,bindAction: '#test9'
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});

		//拖拽上传
		upload.render({
			elem: '#test10'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,done: function(res){
				layer.msg('上传成功');
				layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
				console.log(res)
			}
		});

		//多文件列表示例
		var demoListView = $('#demoList')
				,uploadListIns = upload.render({
			elem: '#testList'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,accept: 'file'
			,multiple: true
			,auto: false
			,bindAction: '#testListAction'
			,choose: function(obj){
				var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
				//读取本地文件
				obj.preview(function(index, file, result){
					var tr = $(['<tr id="upload-'+ index +'">'
						,'<td>'+ file.name +'</td>'
						,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
						,'<td>等待上传</td>'
						,'<td>'
						,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
						,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
						,'</td>'
						,'</tr>'].join(''));

					//单个重传
					tr.find('.demo-reload').on('click', function(){
						obj.upload(index, file);
					});

					//删除
					tr.find('.demo-delete').on('click', function(){
						delete files[index]; //删除对应的文件
						tr.remove();
						uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
					});

					demoListView.append(tr);
				});
			}
			,done: function(res, index, upload){
				if(res.files.file){ //上传成功
					var tr = demoListView.find('tr#upload-'+ index)
							,tds = tr.children();
					tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
					tds.eq(3).html(''); //清空操作
					return delete this.files[index]; //删除文件队列已经上传成功的文件
				}
				this.error(index, upload);
			}
			,error: function(index, upload){
				var tr = demoListView.find('tr#upload-'+ index)
						,tds = tr.children();
				tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
				tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
			}
		});

		//绑定原始文件域
		upload.render({
			elem: '#test20'
			,url: 'https://httpbin.org/post' //改成您自己的上传接口
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});
	});


</script>
</html>
